.dirent-detail-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 14px;
}

.dirent-detail-item:last-child {
  margin-bottom: 0;
}

.dirent-detail-item .dirent-detail-item-name {
  width: 160px;
  padding: 6.5px 0px;
  min-height: 34px;
  height: fit-content;
  color: #666;
  font-size: 14px;
  cursor: default;
}

.dirent-detail-item .dirent-detail-item-name .seafile-multicolor-icon {
  margin-right: 6px;
  font-size: 14px;
  fill: #999;
  flex-shrink: 0;
}

.dirent-detail-item .dirent-detail-item-name .seafile-multicolor-icon-tag {
  position: relative;
  top: 1px;
}

.dirent-detail-item .dirent-detail-item-value {
  width: 200px;
  display: flex;
  height: fit-content;
  min-height: 34px;
}

.dirent-detail-item .dirent-detail-item-value.editable:hover {
  background-color: var(--bs-body-tertiary-bg);
  border-radius: 3px;
  cursor: pointer;
}

.dirent-detail-item .dirent-detail-item-value.editable:hover {
  cursor: pointer;
}

/* media */
.cur-view-detail-small .dirent-detail-item .dirent-detail-item-name {
  width: calc((100% - 8px) * 0.44);
}

.cur-view-detail-small .dirent-detail-item .dirent-detail-item-value {
  width: calc((100% - 8px) * 0.56);
}

.cur-view-detail-large .dirent-detail-item .dirent-detail-item-name {
  width: 160px;
  margin-right: 8px;
}

.cur-view-detail-large .dirent-detail-item .dirent-detail-item-value {
  flex: 1;
}

.dirent-detail-item .dirent-detail-item-value:not(.editable) .sf-metadata-record-cell-empty {
  display: inline-block;
  height: 34px;
  width: 100%;
  line-height: 1.5;
  padding: 6.5px 6px;
}

.dirent-detail-item .dirent-detail-item-value:not(.editable) .sf-metadata-record-cell-empty:empty::before {
  content: attr(placeholder);
  color: #666;
  font-size: 14px;
}

/* formatter */
.dirent-detail-item .dirent-detail-item-value .text-formatter,
.dirent-detail-item .dirent-detail-item-value .ctime-formatter,
.dirent-detail-item .dirent-detail-item-value .mtime-formatter,
.dirent-detail-item .dirent-detail-item-value .date-formatter,
.dirent-detail-item .dirent-detail-item-value .geolocation-formatter {
  padding: 6.5px 6px;
  line-height: 1.5;
}

.dirent-detail-item .dirent-detail-item-value .date-formatter {
  text-align: left;
}

.dirent-detail-item-value .creator-formatter {
  padding: 7px 6px;
}
